<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
	<div id="root">
		<!-- 父组件通过属性的形式向子组件传值，子组件通过自定义事件传值（父组件通过@inc监听） -->
		<counter :count="3" @inc='handleIncrease'></counter>
		<counter :count="4"></counter>
		<div>{{total}}</div>
	</div>
	<script type="text/javascript">
		var counter={
			// 使用props接受父组件数据
			props:['count'],
			// 子组件的DATA一定是一个函数返回一个对象
			data: function(){
				return{
					// 把从父组件接收到的数据复制一份给组件的数据
					number:this.count
				}
			},
			template:'<div @click="handleClick">{{number}}</div>',
			methods:{
				handleClick:function(){
					// 子组件点击的时候通过事件向父组件传递内容
					this.number++;
					// $emit自定义事件后面可以跟参数
					this.$emit('inc',1)
				}
			}
		}
		// 父组件是VUE的根实例
		var vm=new Vue({
			el:'#root',
			data:{
				total:5
			},
			components:{
				counter:counter
			},
			methods:{
				// 父组件函数参数就是子组件自定义事件后面的参数
				handleIncrease:function(step){
					// step就是1
					this.total+=step
				}
			}
		})
	</script>
</body>
</html>